<template>
	<view class="my">
		<text class=" position-relative" style="top:-20px; margin-left:10px"
		@click="openLogin"
		
		>测试昵称</text>	
		
		<view  class="my_top  position-relative"  >
			
			<image  ></image>
			<image :src="loginStatus?userinfo.avatar:'../../static/images/demo/demo6.jpg' "  mode="widthFix" class="rounded-circle border-light ml-4"
			style="height: 145rpx;width: 145rpx;border: 5rpx solid; margin-top: 80px;"
			></image>   
			
		<text class=" position-relative" style="top:-20px; margin-left:10px"  
		@click="openLogin"
		
		>         {{loginStatus ? userinfo.username : '登录/注册'}}
		
		</text>	
		<view class="iconfont icon-xiaoxi position-absolute text-white" style="font-size: 50rpx;top: 75rpx;right: 20rpx;z-index: 100;"></view>
		  <view 
		  class="d-flex a-center j-center a-self-end ml-auto px-2"
		  
		  style="height: 70rpx; width: 140px;  top:-50px;  z-index: 100;  position: relative;
		  background:   #FFD43F;
		  color: #CC4A00;border-top-left-radius: 40rpx;border-bottom-left-radius: 40rpx;">
			  <view class="line-h iconfont icon-huangguan mr-1"></view>
			  会员积分 1.99	  
		  </view>	
		</view>
		<view>
			   <card>
			   	<view slot="title" class="d-flex a-center j-sb">
			   		<text class="font-md font-weight">我的订单</text>
			   		<view class="text-secondary font">
			   			全部订单 <text class="iconfont icon-you font"></text>
			   		</view>
			   	</view>
			   	<view class="d-flex a-center">
			   		<view class="flex-1 d-flex flex-column a-center j-center py-3" hover-class="bg-light-secondary" v-for="i in 4" :key="i">
			   			<view class="iconfont icon-cpu font-lg line-h"></view>
			   			<view>待付款</view>
			   		</view>
			   	</view>
			   </card>
			
		</view>
		
		
			<divider></divider>
		<view>
			
			<uni-list-item showExtraIcon leftIconStyle="color:#FDBF2E;" leftIcon="icon-VIP" title="小米会员"></uni-list-item>
			<uni-list-item showExtraIcon leftIconStyle="color:#FCBE2D;" leftIcon="icon-huangguan" title="会员中心"></uni-list-item>
			<uni-list-item showExtraIcon leftIconStyle="color:#FA6C5E;" leftIcon="icon-service" title="服务中心"></uni-list-item>
			<uni-list-item showExtraIcon leftIconStyle="color:#FE8B42;" leftIcon="icon-home" title="小米之家"></uni-list-item>
			<uni-list-item showExtraIcon leftIconStyle="color:#9ED45A;" leftIcon="icon-gengduo" title="更多功能"></uni-list-item>
		</view>
		
		<divider></divider>
		<view>
			
		
		
		<!-- @click="navigate('user-set')" -->
		<!-- @click="navigate('user-userinfo') -->
		<!-- @click="navigate('user-path-list')" -->
		<uni-list-item showExtraIcon leftIconStyle="color:#808C98;" leftIcon="icon-icon_set_up" title="更多设置" @click="navigate('user-path-list')"></uni-list-item>
		<uni-list-item showExtraIcon leftIconStyle="color:#808C98;" leftIcon="icon-icon_set_up" title="更多设置进入登录页面"     @click="openLogin"></uni-list-item>
		<uni-list-item showExtraIcon leftIconStyle="color:#808C98;" leftIcon="icon-icon_set_up" title="退出登录" @click="logout"></uni-list-item>	
		</view>
	</view>
</template>

<script>
	
	import  card  from '@/components/common/card.vue'
	
	import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"
	
	//  引入 request 
	
	// import  api from '@/common/lib/request.js'
	
	
	// console.log(api.get)
	
	import {mySwierpPathData} from '../../common/lib/myUrl.js'
	
	
		import { mapState,mapMutations } from 'vuex'
	export default {
		
		computed:{
			...mapState({
				loginStatus:state=>state.user.loginStatus,
				userinfo:state=>state.user.userinfo,
				
			})
			
			
		},
		
		
		data() {
			return {
				
				msg:''
			}
		},
		components:{
			card,
			uniListItem
		},
		methods: {
			
			navigate(url) {
				uni.navigateTo({
					url:`../${url}/${url}`
				})
			},
			
			openLogin() {
				uni.navigateTo({
					url:'../login/login'
				})
				
			},
			
			...mapMutations(['myLogout']),
			
			//退出登录 
			logout() {
				//发送请求
				this.$api.post({url:'/logout',header:{
					token: this. userinfo.token
				}}).then(res=>{
					
					
					
					  this.myLogout()
					  uni.navigateTo({
					  	url:'../login/login'
					  })
				})
				
				
			},
			
		},
		onReady() {
			this.$api.get({url:mySwierpPathData}).then(res=>{
				console.log(res)
				this.msg=res
			})
		}
	}
</script>

<style>
		
/* 	.my_top {
		width: 100%;
		height: 160px;
		background-position: 0 0;
		background-size: cover;
		background-image: url('../../static/images/bg.jpg');
		
	} */

</style>
